<!--<template>-->
    <!--<header class="head-nav">-->
        <!--<header class="container">-->
            <!--<div class="row logo">-->
                <!--<div class="col-md-3">-->
                    <!--<img src="../assets/health/logo.png" height="55" width="248"/>-->
                <!--</div>-->

                <!--<div class="col-md-3 col-md-offset-6">-->
                    <!--<div class="form-search">-->
                        <!--<input type="text" placeholder="请输入搜索关键词">-->
                        <!--<button class="glyphicon glyphicon-search"></button>-->
                        <!--<div class="single"></div>-->
                    <!--</div>-->

                <!--</div>-->
            <!--</div>-->
            <!--<nav class="navbar navbar-default myNav">-->
                <!--<div class="container-fluid">-->
                    <!--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
                        <!--<ul class="nav navbar-nav navbar_nav">-->
                            <!--<li class="on">-->
                                <!--<router-link to="/home"> 首页</router-link>-->
                            <!--</li>-->
                            <!--<li v-for="item in items" v-if="item.children.length==1" >-->
                                <!--<a href="#" v-if="item.children.length==1">{{item.name}}</a>-->
                            <!--</li>-->
                            <!--<li v-for="item in items" v-if="item.children.length!==1" >-->
                                <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{item.name}} <span class="caret"></span></a>-->
                                <!--<ul class="dropdown-menu nav_ul" >-->
                                    <!--<li v-for="children in item.children"><a href=""><router-link to="/infoshow">{{children.name}}</router-link></a></li>-->
                                    <!--&lt;!&ndash;<li role="separator" class="divider"></li>&ndash;&gt;-->
                                <!--</ul>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</nav>-->
        <!--</header>-->
    <!--</header>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
  <!--name: "head-nav",-->
    <!--data() {-->
        <!--return {-->
            <!--items: [-->
                <!--{-->
                    <!--name: "关于我们",-->
                    <!--path: "about",-->
                    <!--children: [-->
                        <!--{ path: "about1", name: "资金流水" },-->
                        <!--{ path: "about2", name: "塑形美体" },-->
                        <!--{ path: "about3", name: "经典纯粹" },-->
                        <!--{ path: "about4", name: "理疗修复" },-->
                        <!--{ path: "about5", name: "情绪释放" },-->
                        <!--{ path: "foundlist", name: "职业老师" },-->
                        <!--]-->
                <!--},-->
                <!--{-->
                    <!--name: "新闻资讯",-->
                    <!--path: "new",-->
                    <!--children: [{ path: "infoshow", name: "个人信息" }]-->
                <!--},-->
                <!--{-->
                    <!--name: "新闻资讯",-->
                    <!--path: "new",-->
                    <!--children: [{ path: "infoshow", name: "个人信息" }]-->
                <!--},-->
                <!--{-->
                    <!--name: "新闻资讯",-->
                    <!--path: "new",-->
                    <!--children: [{ path: "infoshow", name: "个人信息" }]-->
                <!--},-->
                <!--{-->
                    <!--name: "新闻资讯",-->
                    <!--path: "new",-->
                    <!--children: [{ path: "infoshow", name: "个人信息" }]-->
                <!--},-->
            <!--]-->
        <!--};-->
    <!--}-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
 <!--/*-->
 <!--* @author cy on 2018/11/11-->
 <!--* */-->
    <!--.logo{-->
        <!--padding: 20px;-->
    <!--}-->
    <!--.logo input{-->
        <!--padding: 15px;-->
        <!--height: 50px;-->
        <!--width: 240px;-->
        <!--outline: none;-->
        <!--border: none;-->
        <!--color: white;-->
        <!--position: relative;-->
        <!--background: #f06ca8;-->
        <!--transition: .3s;-->
    <!--}-->
    <!--.form-search{-->
        <!--position: relative;-->
    <!--}-->
    <!--.form-search:hover input{-->
        <!--background: #be6fe8;-->
    <!--}-->
    <!--.form-search:hover .single{-->
        <!--border-width: 10px 0 10px 10px;-->
        <!--border-color:transparent transparent transparent #be6fe8 ;-->
    <!--}-->
    <!--.logo input::placeholder{-->
        <!--color: white;-->
    <!--}-->
    <!--.logo button{-->
        <!--color: white;-->
        <!--position: absolute;-->
        <!--right: 40px;-->
        <!--top:17px;-->
        <!--border: none;-->
        <!--background: transparent;-->
    <!--}-->
    <!--.single{-->
        <!--transition: .3s;-->
        <!--position: absolute;-->
        <!--top:16px;-->
        <!--right: 17px;-->
        <!--border-style: solid;-->
        <!--border-width: 10px 0 10px 10px;-->
        <!--border-color: transparent transparent transparent #f06ca8;-->
    <!--}-->
    <!--.myNav{-->
        <!--height: 50px;-->
        <!--background-color: white;-->
        <!--border: none;-->
        <!--border-top: 1px solid #e9e9e9;-->
    <!--}-->
    <!--.myNav li{-->
        <!--font-size: 16px;-->
    <!--}-->
    <!--.myNav .on a{-->
        <!--color:#f06ca8!important;-->
    <!--}-->
    <!--.nav_ul li{-->
        <!--height: 40px;-->
        <!--line-height: 40px;-->
        <!--font-size: 16px;-->
        <!--letter-spacing: 2px;-->
    <!--}-->
    <!--.dropdown-menu > li>a{-->
        <!--padding: 10px 20px;-->
        <!--text-align: center;-->
    <!--}-->
    <!--.navbar_nav>li{-->
        <!--margin-right: 40px;-->
    <!--}-->
    <!--.navbar-collapse .navbar_nav>li:hover>a{-->
        <!--color: #f06ca8;-->
    <!--}-->
    <!--.dropdown-menu li a:hover{-->
        <!--color: white;-->
        <!--background-color: #f06ca8;-->
    <!--}-->

<!--</style>-->


<template>
    <header class="head-nav">
        <el-row>
            <el-col :span="6" class='logo-container'>
                <img src="../assets/logo.png" class='logo' alt="">
                <span class='title'>米修在线后台管理系统</span>
            </el-col>
            <el-col :span='6' class="user">
                <div class="userinfo">
                    <img :src="user.avatar" class='avatar' alt="">
                    <div class='welcome'>
                        <p class='name comename'>欢迎</p>
                        <p class='name avatarname'>{{user.name}}</p>
                    </div>
                    <span class='username'>
                        <el-dropdown
                                trigger="click"
                                @command='setDialogInfo'>
                            <span class="el-dropdown-link">
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command='info'>个人信息</el-dropdown-item>
                                <el-dropdown-item  command='logout'>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                     </span>
                </div>
            </el-col>

        </el-row>

    </header>
</template>
<script>
    export default {
        name: "head-nav",
        computed: {
            user() {
                return this.$store.getters.user;
            }
        },
        methods: {
            setDialogInfo(cmditem) {
                if (!cmditem) {
                    console.log("test");
                    this.$message("菜单选项缺少command属性");
                    return;
                }
                switch (cmditem) {
                    case "info":
                        this.showInfoList();
                        break;
                    case "logout":
                        this.logout();
                        break;
                }
            },
            showInfoList() {
                // 个人信息
                this.$router.push("/infoshow");
            },
            logout() {
                // 清除token
                localStorage.removeItem("eleToken");
                this.$store.dispatch("clearCurrentState");

                // 页面跳转
                this.$router.push("/login");
            }
        }
    };
</script>

<style scoped>
    .head-nav {
        width: 100%;
        height: 80px;
        min-width: 600px;
        padding: 5px;
        background: #324057;
        color: #fff;
        border-bottom: 1px solid #1f2d3d;
    }
    .logo-container {
        line-height: 60px;
        min-width: 400px;
    }
    .logo {
        height: 50px;
        width: 50px;
        margin-right: 5px;
        vertical-align: middle;
        display: inline-block;
    }
    .title {
        vertical-align: middle;
        font-size: 22px;
        font-family: "Microsoft YaHei";
        letter-spacing: 3px;
    }
    .user {
        line-height: 60px;
        text-align: right;
        float: right;
        padding-right: 10px;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
    }
    .welcome {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        padding: 0 5px;
    }
    .name {
        line-height: 20px;
        text-align: center;
        font-size: 14px;
    }
    .comename {
        font-size: 12px;
    }
    .avatarname {
        color: #409eff;
        font-weight: bolder;
    }
    .username {
        cursor: pointer;
        margin-right: 5px;
    }
    .el-dropdown {
        color: #fff;
    }
</style>

